<template>
  <div>
    <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item style="cursor:pointer;"><span style="cursor:pointer;">设备运行记录</span></el-breadcrumb-item> -->
        <el-breadcrumb-item><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>设备运行记录</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
          <el-form ref="refForm" :model="form" label-width="80px"  size="small">
            <el-row>
              <el-col :span="8">
                <el-form-item label="委试号">
                  <el-input v-model="form.number" placeholder="请输入委试号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设备名称">
                  <el-input v-model="form.name" placeholder="请输入设备名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设备型号">
                  <el-input v-model="form.model" placeholder="请输入设备型号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="工位名称">
                  <el-select v-model="form.station" placeholder="请选择工位" style="width: 100%" clearable>
                    <el-option
                      v-for="item in options"
                      :key="item.station_name"
                      :label="item.station_name"
                      :value="item.station_name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试验日期">
                  <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"  value-format="yyyy-MM-dd" style="width:100%"></el-date-picker>
                  
                  <!-- <el-date-picker clearable :picker-options="pickerOptions" v-model="form.date" type="date" placeholder="请选择日期" style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="float: right;">
                  <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                  <el-button  size="small" class="textBtn" @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          </div>
          <el-table stripe border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" @sort-change='sortChange' style="width: 100%">
            <el-table-column type="expand" width="40px">
              <template slot-scope="scope">
                <!-- <div> -->
                <div>
                  <span>设备编号：</span>
                  <span style="color: #6565e6;">{{scope.row.instr_number}}</span>
                </div>
                <div>
                  <span>设备规格：</span>
                  <span style="color: #6565e6;">{{scope.row.spec}}</span>
                </div>
                <!-- </div> -->
              </template>
            </el-table-column>
            <el-table-column sortable="custom" label="委试号" prop="test_number" align="center" show-overflow-tooltip>  </el-table-column>
            <el-table-column sortable="custom" label="设备名称" prop="instr_name" align="center" show-overflow-tooltip>  </el-table-column>
            <el-table-column sortable="custom" label="设备型号" prop="model" align="center" show-overflow-tooltip>  </el-table-column>
            <el-table-column sortable="custom" label="试验日期" prop="begin_time" align="center" show-overflow-tooltip>  </el-table-column>
            <el-table-column sortable="custom" label="试验前状态" prop="before_status" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.before_status == 1">正常</span>
                <span v-else-if="scope.row.before_status == 0">异常</span>
                <span v-else>异常</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" label="试验后状态" prop="after_status" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.after_status == 1">正常</span>
                <span v-else-if="scope.row.after_status == 0">异常</span>
                <!-- <span v-else-if="!scope.row.after_status">--</span> -->
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" label="工位名称" prop="station_name" align="center">  </el-table-column>
            <el-table-column sortable="custom" label="操作人" prop="opt_user" align="center" show-overflow-tooltip>  </el-table-column>
            <el-table-column sortable="custom" label="确认人" prop="confirm_user" align="center">
              <template slot-scope="scope">
                <span v-if="!scope.row.confirm_user">--</span>
                <span v-else>{{scope.row.confirm_user}}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" label="确认日期" prop="confirm_date" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="!scope.row.confirm_date">--</span>
                <span v-else>{{scope.row.confirm_date}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="145%">
              <template slot-scope="scope">
                <el-button class="sure" @click="confirm(scope.row)" :disabled="btnList.sure? true : scope.row.after_status === null || scope.row.after_status == '0' ? true : scope.row.confirm_user ? true : false" size="mini" type="primary">确定设备状态</el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-pagination hide-on-single-page style="float: right; margin-bottom: 10px; margin-top: 10px;" background :current-page.sync="currentPage" :page-size.sync="pageSize"
                layout="prev, pager, next"
                :total="tableData.length">
            </el-pagination>
        </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import roleBtn from '../../public/means'
export default {
  data() {
    return {
      btnList: {
        sure: false
      },
      menu_id: 27,
      pickerOptions: {
        disabledDate(time) {   //time跟页面没有关系   相当于日期数组
            return time.getTime() > Date.now() - 8.64e6  //设置选择今天以及今天之前的日期
          }
      },
      currentPage: 1,
      pageSize: 10,
      count: 1,
      form: {
        number: '',
        name: '',
        model:'',
        station: '',
        date: ''
      },
      options: [],
      tableData: [],
      tableDatas: [],
      // sortRule:{prop:null,order:null}
    }
  },
  methods: {
    // 表格数据排序通用函数
		generalSort(attr, rev){
			//第一个参数传入表示排的是哪一列，第二个参数是升还是降排序
			if (rev == undefined) {
				rev = 1;
			} else {
				rev = (rev) ? 1 : -1;
			}
			return function (arry, barry) {
				arry = arry[attr];
				barry = barry[attr];
        if(arry === null){
          return -1
        }
				if (arry < barry) {
					return rev * -1;
				}
				if (arry > barry) {
					return rev * 1;
				}
				return 0;
			}
		},
    // // 表格排序问题
		// sortChange(column){
		// 	this.currentPage = 1;
		// 	if (column.prop === 'test_number') {
		// 		this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
		// 	}
    //   else if (column.prop === 'instr_name') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'model') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'begin_time') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'before_status') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'after_status') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'station_name') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'opt_user') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'confirm_user') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
    //   else if (column.prop === 'confirm_date') {
    //     this.tableData = this.tableData.sort(this.generalSort(column.prop, column.order === 'ascending'));
    //   }
		// 	// this.tableData = this.tableData.slice(0, this.pageSize) // 排序完显示到第一页
		// },
    sortChange(column){
		// console.log(column,"sortchange")
	　　　　//点击向上【向下】激发排序　　
		this.currentPage = 1;
		// this.sortRule.order = column.order;
		// this.sortRule.prop = column.prop;
		if(column.order !== null && column.prop !== null){   //项目中要求所有列可排序，所以条件进行了判断！==null 即所有列 【如果项目中只有单个列【特定列】存在排序要求，出现混乱，colum.prop == "列的key"即可。】
			let index = column.prop;
			let data = [];
			let datas = [];
			for(let i = 0; i < this.tableData.length; i++){  //this.tableDate 为表格总数据，后台请求的数据
				if(this.tableData[i][index] === null){
					data.push(this.tableData[i]);
				}else{
					datas.unshift(this.tableData[i]);
				}
			}
			datas.sort(this.generalSort(column.prop, column.order === 'ascending'))
			this.tableData = datas.concat(data)
			// this.trialRecordData = this.trialRecordData.sort(this.generalSort(column.prop, column.order === 'ascending'));
		}
	　　//再点击向上【向下】恢复原始排序
		if(column.order === null){
			this.tableData = this.tableDatas;
		}
    	},
    dateChange(val) {
      console.log(val);
      // if(!this.form.date) {
      //   console.log(123);
      // }
    },
    keyupSubmit(){
        document.onkeydown=e=>{
          let _key=window.event.keyCode;
          if(_key===13){
            this.onSubmit()
          }
        }
      },
    async onSubmit() {
      const { result } = await this.$http.post('/screenDeviceRunRecord', {test_number: this.form.number, instr_name: this.form.name, model: this.form.model, station_name: this.form.station, begin_time: this.form.date})
      this.tableData = result
    },
    reset() {
      this.form.number = ''
      this.form.name = ''
      this.form.model = ''
      this.form.station = ''
      this.form.date = ''
    },
    async confirm(row) {
      const confirm = await this.$confirm('此操作一经确定不可撤回, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(confirm !== 'confirm') {
          return this.$message('已取消确定！')
        }
        const name = JSON.parse(sessionStorage.getItem('userInfo')).nickname
        const user_id = JSON.parse(sessionStorage.getItem('userInfo')).user_id
        const date = dayjs(new Date()).format('YYYY-MM-DD')
        const res = await this.$http.post('/updateDeviceRunRecord',{ir_id: row.ir_id, confirm_user: user_id, confirm_date: date})
        if(res.code !== 200) return this.$message('确认失败！')
        this.$message.success(res.message)
        row.confirm_user = name
        row.confirm_date = date
    },
    async getDeviceRunRecord() {
      const res = await this.$http.get('getDeviceRunRecord')
      this.tableData = res.result
      this.tableDatas = res.result
    },
    async getManageMentStation () {
      const { result } = await this.$http.get('/stationManagement/getAllStation')
      this.options = result
    },
    setTimeDef() {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			const startTime = dayjs(start).format('YYYY-MM-DD');
			const endTime = dayjs(end).format('YYYY-MM-DD');
			this.form.date = [startTime, endTime];
			console.info("||||||||||||||||||")
			console.info(this.form.date)
			this.getDeviceRunRecord();
		},
  },
  
  async created() {
    // let date=new Date();
    // let year=date.getFullYear();
    // let month=date.getMonth()+1;
		// if (month >= 1 && month <= 9) {
    //   month = "0" + month;
    // }
		// this.form.date=year+"-"+month;
    this.keyupSubmit()
    this.setTimeDef() // 获取设备运行记录列表
    this.getManageMentStation() // 获取所有工位信息
    const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
    if(role_id){
      // 获取按钮权限状态
      let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
      this.btnList = arr
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./DeviceRunRecord.scss";
</style>